<template>
    <div class="wrapper">
        <vSearchForm @handleSearch="getRecordList" />
        <div class="tabs-nav">
            <span class="tabs-item">申请单列表<br>(共{{pageData.total}}条记录)</span>
        </div>
        <el-table
            :data="tableData"
            border
            style="width: 100%;text-align: center">
            <el-table-column
                prop="applyNo"
                label="申请单号,No."
                min-width="100px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="itemDescription"
                label="物资描述,Item Description"
                min-width="260px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="applyTime"
                label="申请时间,Application Time	"
                min-width="150px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="status"
                label="申请单状态,Application Status"
                min-width="150px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <span>{{statusList[scope.row.status]}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="reviewStatus"
                label="审批状态,Approval Status	"
                min-width="150px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <span>{{reviewStatusList[scope.row.reviewStatus]}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="erpStatus"
                label="ERP状态,ERP Status"
                min-width="150px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <span>{{erpStatusStatusList[scope.row.erpStatus]}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="reviewTime"
                label="审批时间,Approval Time	"
                min-width="150px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column fixed="right"
                prop="opertion"
                label="操作,Operation"
                min-width="200px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="To view" placement="top">
                        <el-button @click="goLookDetails(scope.row.id)" type="text" size="small" class="el-icon-view" style="font-size: 24px;"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="Editor" placement="top">
                        <el-button @click="applyEditor(scope.row)" type="text" size="small" class="el-icon-edit" style="font-size: 24px;"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="Add common material list" placement="top">
                        <el-button :disabled="scope.row.oftenUse === 2 ? true : false"     @click="addMaterialMode(scope.row.id)" type="text" size="small" class="el-icon-document" style="font-size: 24px;"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="Delete" placement="top">
                        <el-button  type="text" size="small" class="el-icon-delete" @click="deleteInfor(scope.row.id) "style="font-size: 24px;"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div  v-if="pageData.total>0">
            <v-pagination   :pageData="pageData" @onPageChange="onPageChange"></v-pagination>
        </div>

        <!--全部导出按钮-->
        <el-button type="primary" class="ex-btn" @click="arrExportSubmit">全部导出</el-button>

        <!--&lt;!&ndash;备注弹窗&ndash;&gt;-->
     <vRemarksMode :dialogFormVisible="dialogFormVisible" :id="id" @dialogFormVisibleClose="dialogFormVisibleClose" @getRecordList="getRecordList"/>
    </div>
</template>

<script>
import vSearchForm from './SearchForm.vue'; //条件搜索查询
import http from "../../../components/axios/fetch";
import { getApplyList ,deleteApply} from "../../../components/axios/url";
import renderHeader from '../../common/renderHeader.js'; //表头
import vPagination from "../../common/Pagination.vue"; //分页remarksMode
import vRemarksMode from "./remarksMode.vue";   //弹窗
import bus, {TYPES} from '../../common/bus';
import SERVER from "../../../components/axios/config";
import {UserHelper} from "../../../components/helpers/UserHelper";

    export default {
        data() {
            return {
                page: 1,
                tableData: [],
                pageData: {},
                statusList: ['','未提交','已提交','已删除'], // 申请单状态
                reviewStatusList: ['', '审核中', '审核通过', '审核不通过'], // 审批状态
                erpStatusStatusList: ['', '全部失败', '部分失败', '全部成功'], // ERP状态
                dialogFormVisible: false,
                id:'',
                ruleForm: {},
            }
        },
        components:{
            vSearchForm,vPagination,vRemarksMode
        },
        created() {
            const data = {
                page: this.page,
            }
            this.getRecordList(data);
            bus.$on(TYPES.recordFormData, (ruleForm)=>{
                let item = {
                    ...this.ruleForm = ruleForm,
                    page: this.page
                }
                this.getRecordList(item);
            });
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    let is_del = false;
                    for (let i = 0; i < this.del_list.length; i++) {
                        if (d.name === this.del_list[i].name) {
                            is_del = true;
                            break;
                        }
                    }
                    if (!is_del) {
                        if (d.address.indexOf(this.select_cate) > -1 &&
                            (d.name.indexOf(this.select_word) > -1 ||
                                d.address.indexOf(this.select_word) > -1)
                        ) {
                            return d;
                        }
                    }
                })
            }
        },
        methods: {
            renderHeader: renderHeader,
            search() {
                this.is_search = true;
            },
            // 表格数据
            getRecordList(data) {

                try{
                    http.post(getApplyList,{...data}).then(res => {
                        if(res.data && res.data.resultMess === "success") {
                            this.tableData = res.data.data.list
                            this.pageData = res.data.data.page
                        }
                    })
                } catch(error){
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                }
            },
           // 分页
            onPageChange(page) {
                this.page = page;
                const data = {
                    ...this.ruleForm,
                    page: page,
                }
                this.getRecordList(data);
            },
            // 加入常用物料单 弹窗
            addMaterialMode(id){
              this.dialogFormVisible = true;
              this.id = id;
            },
            dialogFormVisibleClose() {  // 关闭弹窗
                this.dialogFormVisible = false
            },

            //查看详情
            goLookDetails(id){
                this.$router.push( {path: '/platform/InforCheck', query:{ applyId:id},  params: { applyId:id} } )
            },

            applyEditor(record) {  // 编辑
                this.$router.push({
                    path: '/platform/Application',
                    query:{
                        id: record.id,
                        modeType: 'edit'
                    }
                });
            },
            // 删除申请单
            deleteInfor(id) {
                this.$confirm('是否删除该申请单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '再想想',
                    type: 'warning'
                }).then(() => {
                    const data = {
                        applyId: id
                    }
                    try{
                        http.post(deleteApply,{...data}).then(res => {
                            if(res.data && res.data.resultMess === "success") {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.getRecordList(this.page);

                            }
                        })
                    } catch(error){
                        this.$notify.error({
                            title: '提示',
                            message: '网络错误',
                        });
                    }

                });

            },
            // 全部导出
            arrExportSubmit() {
                window.location = `${SERVER.host}apply/export?userId=${UserHelper.getUserId()}&_st=${UserHelper.getToken()}`
            }

        }
    }

</script>

<style scoped>
    .wrapper{
        background: #fff;
    }
    .tabs-nav{
        background:#f5f7fa;
        border: 1px solid #e4e7ed;
    }
    .tabs-item {
        color: #409EFF;
        background-color: #fff;
        border-right-color: #dcdfe6;
        border-left-color: #dcdfe6;
        padding: 5px 20px;
        height: 40px;
        display: inline-block;
        border-bottom: 0px;
        font-size: 14px;
    }
    .pagination-wrapper{
        padding: 20px 0;
        text-align: center;
    }
    .ex-btn{
        float: right;
        margin-right: 5%;
        cursor: pointer;
        margin: 20px;
    }
    .rTitle{
        margin-top: -40px;
        margin-bottom: 20px;
        color: rgb(102, 102, 102);
        font-weight: 600;
        font-size: 16px;
    }


</style>
